<template>
  <div>
    <el-button
      type="success"
      icon="el-icon-plus"
      plain
      size="small"
      style="margin-bottom: 20px;"
      @click="showDialog('add')"
      >添加系统用户</el-button
    >
    <el-table :data="list" border v-loading="loading" style="width: 100%">
      <el-table-column prop="name" label="管理员名称"> </el-table-column>
      <el-table-column prop="account" label="管理员账号"> </el-table-column>
      <el-table-column label="管理员权限">
        <template slot-scope="scope">
          {{
            scope.row.type == 0
              ? "系统户籍相关操作、修改系统用户信息"
              : "系统户籍相关操作"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span v-if="type == 1" style="color: #aaa; font-size: 12px;"
            ><i style="display:none">{{ scope.row.id }}</i
            >暂无操作权限</span
          >
          <el-button
            v-if="type == 0"
            type="primary"
            size="mini"
            @click="showDialog('modify', scope.$index)"
            >修改</el-button
          >
          <el-button
            v-if="type == 0"
            type="danger"
            size="mini"
            @click="resetPwd(scope.row, scope.$index)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="480px"
      @close="cancel"
    >
      <el-form :model="form" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item label="名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogType == 'add'" label="密码">
          <el-input v-model="form.pwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="dialogType == 'add'" type="primary" @click="addAdmin"
          >确 定</el-button
        >
        <el-button
          v-if="dialogType == 'modify'"
          type="primary"
          @click="modifyAdmin"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { storage } from "../../utils/storage.js";
import { utils } from "../../utils/common.js";
export default {
  data() {
    return {
      type: storage.getSession("type"),
      id: storage.getSession("id"),
      list: [],
      loading: false,
      dialogFormVisible: false,
      dialogType: "add",
      dialogTitle: "添加系统用户",
      dialogIndex: null,
      form: {
        name: "",
        account: "",
        pwd: "",
        role: "admin",
        type: 1
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    getList() {
      this.loading = true;
      setTimeout(() => {
        this.list = storage.getStorage("admin");
        this.loading = false;
      }, 500);
    },
    showDialog(type, index) {
      if (this.type == "1") {
        return this.$message.warning("您没有此操作权限，请联系超级管理员添加");
      }
      this.dialogIndex = index;
      this.dialogType = type;
      if (type == "add") {
        this.dialogTitle = "添加系统用户";
      } else if (type == "modify") {
        this.dialogTitle = "修改系统用户";
        this.form = JSON.parse(JSON.stringify(this.list[this.dialogIndex]));
      }
      this.dialogFormVisible = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cancel() {
      this.resetForm("ruleForm");
      this.dialogFormVisible = false;
    },
    addAdmin() {
      if (
        this.form.name == "" ||
        this.form.account == "" ||
        this.form.pwd == ""
      ) {
        return this.$message.warning("请将信息填写完整");
      }
      this.form.id = this.list[this.list.length - 1].id + 1;
      this.form.created = utils.formatDate(new Date().getTime());
      setTimeout(() => {
        this.list.push(JSON.parse(JSON.stringify(this.form)));
        storage.setStorage("admin", this.list);
        this.cancel();
        this.$message.success("添加管理员成功");
      }, 500);
    },
    modifyAdmin() {
      setTimeout(() => {
        this.$set(this.list, this.dialogIndex, this.form);
        storage.setStorage("admin", this.list);
        this.cancel();
        this.$message.success("修改成功");
        if (this.form.id == this.id && this.form.type == this.type) {
          setTimeout(() => {
            this.$message.success("您的信息已修改，请重新登录");
            sessionStorage.clear();
            this.$router.replace("/login");
          }, 500);
        }
      }, 500);
    },
    resetPwd(temp, index) {
      temp.pwd = "123456";
      setTimeout(() => {
        this.$set(this.list, index, temp);
        storage.setStorage("admin", this.list);
        this.$message.success("密码重置成功");
        if (temp.id == this.id && temp.type == this.type) {
          setTimeout(() => {
            this.$message.success("您的密码已重置，请重新登录");
            sessionStorage.clear();
            this.$router.replace("/login");
          }, 500);
        }
      }, 500);
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>
